<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div class="yeye">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>

    <div class="nav">
        <p>外层P标签</p>
        <div>
            <p>内存P标签</p>
        </div>
    </div>
    <script>
          /* 
            层级选择器

            语法                        用法                        说明
            parent()                $('li').parent();           查找父级元素
            children(selector)      $('ul').children('li')      相当于 $('ul>li'),最近一级(亲儿子)
            find(selector)          $('ul').find('li')          相当于 $('ul li'),后代选择器
            siblings(selector)      $(.first).siblings('li')    查找兄弟节点，不包含自身
            nextAll([expr])         $('.first').nextAll()       查找当前元素之后的所有元素 
            preAll([expr])          $('.first').prevAll()       查找当前元素之前的所有元素
            hasClass(class)         $('div').hasClass('current')判断当前元素中是否函数特点类，返回布尔值
            eq(index)               $('li').eq(2)               相当于 $('li:eq(2)')
        */
        // 注意都是方法，带括号
        $(function () {
            // 1. 父 parent() 返回最近一级的父级元素
            console.log($('.son').parent());

            // 2. 子
            // 2.1 亲儿子 children() 类似子代选择器 ul>li
            // $('.nav').children('p').css('color','red');
            
            // 2.2 可以选择里面所有的孩子，包括孙子和儿子
            $('.nav').find('p').css('color', 'green');

        });
    </script>
</body>
</html>